@charset "utf-8";
@import "animate";
//滚动条
::-webkit-scrollbar{
    width: 6px;
    height: 6px;
    background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
    box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 6px inset;
    background-color: rgb(1, 142, 232);
    border-radius: 10px;
}
//头部
header{
    .navbar-default{
        background: #222222;
        border: none;
        .navbar-nav{
            margin-bottom: 0;
            >.active{
                a{
                    &,&:hover{
                        color: #fff;
                        background: #080808;
                    }
                }
                li{
                    a{
                        color: #fff;
                        background: #080808;
                    }
                }
            }
        }
        
    }
    .navbar-brand{
         padding: 7px 6px;
    }
    .navbar{
        margin-bottom: 0;
    }
    .bgwrap{
        background: #2b80da;
        padding-top: 50px;
        .imgwrap{
            height: 656px;
            overflow: hidden;
            img{
                width: 100%;
            }
        }
    }
    .none-padding{
        padding: 0;
    }
    
}
//内容部分
.content{
    .m0{
        margin: 0;     
    }
    .p0{
        padding: 0;
    }
    .engine-wrap{
        background-color: #fbfaf7;
        .container{
            padding-top: 106px;
            padding-bottom: 130px;
            background: url(../img/flash-bg.jpg) no-repeat top 137px right ;
        }
        .engine-title{
            h2{
                font-size: 48px;
                color: #0078d7;
                font-weight: bolder;
                margin-top: 0;
                margin-bottom: 0;
            }
            h3{
                font-size: 30px;
                margin-top: 30px;
                margin-bottom: 74px;
            }
        }
        .icon-wrap{
            width: 64px;
            height: 64px;
            border-radius: 4px;
            transition: all 1s;
            background:url(../img/flash-001.png) no-repeat center center/100% 100%;
            background-color: #0078d7;
            &:hover{
                transform: rotate(360deg);
                background-color: yellow;
            }
        }
        .flash-02{
            background-image:url(../img/flash-002.png) ;
        }
        .flash-03{
            background-image:url(../img/flash-003.png) ;
        }
        .flash-04{
            background-image:url(../img/flash-004.png) ;
        }
        .text-wrap{
            h4{
                font-size: 20px;
                margin-top: 0;
                margin-bottom: 0;
            }
            p{
                margin-top: 10px;
                font-size: 14px;
                line-height: 24px;
                color: #949392;
            }
        }
    }
    .advantage-wrap{
        .container{
            padding-top: 92px;
            padding-bottom: 90px;
            .bg{
                height: 376px;
                background: url(../img/air-bar.jpg) no-repeat left bottom /312px 302px;
                &:hover{
                opacity:.8 ;
                }
            }
            .wrap{
                .mb16{
                    margin-bottom: 16px;
                }
            }
            .m5{
                margin: 0 10px 0 5px;
            }
            span{
                display: block;
                font-size: 14px;
                padding-top: 17px;
            }
        }
        h2{
            color: #8fc31f;
            font-size: 40px;
            font-weight: bold;
            margin-bottom: 32px;
        }
        .icon-wrap{
            width: 54px;
            height: 54px;
            border-radius: 50%;
            background:url(../img/ad01.png) no-repeat 40% 50%/90% 100%;
            background-color: #8fc31f;
        }
        .ad-02{
            background-image: url(../img/ad02.png);
        }
        .ad-03{
            background-image: url(../img/ad03.png);
        }
        .ad-04{
            background-image: url(../img/ad04.png);
        }
    }
    .family-wrap{
        background: #0079d7;
        color: #fffefe;
        padding-top: 54px;
        padding-bottom: 102px;
        .icon-wrap{
            width: 66px;
            height: 66px;
            overflow: hidden;
            margin-top: 14px;
            margin-left: 28px;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .icon-wrap2{
            width: 74px;
            height: 70px;
            overflow: hidden;
            margin-top: 14px;
            margin-left: 28px;
            img{
                width: 100%;
                height: 100%;
            }
        }
        h2{
            font-size: 49px;
            margin-top: 56px;
            margin-bottom: 39px;
        }
        h3{
            margin-top: 0;
            font-size: 33px;
        }
        p{
            line-height: 29px;
            text-align: justify;
        }
        .padding-ct{
            padding-top: 26px;
            padding-bottom: 39px;
        }
        .margin-l5{
            margin-left: 5px;
        }
    }
    .game-wrap{
        .container{
            padding-top: 40px;
            padding-bottom: 40px;
            .title-wrap{
                padding-top: 44px;
                padding-bottom: 45px;
                h2{
                    margin-top: 0;
                    font-size: 35px;
                }
                a{
                    text-align: right;
                    color: #2a2a2a;
                }
            }
            
            .video{
                width: 370px;
                height: 200px;
                margin: 0 auto;
                overflow: hidden;
                border-radius: 5px;
                video{
                    width: 100%;
                    height: 100%;
                }
            }
            .game-pro>.row:first-of-type{
                .g-content{
                    padding-top: 0;
                }
            }
            .g-content{
                padding:14px 14px 8px 14px;
                a{
                    display: block;
                    line-height: 21px;
                    margin-bottom: 0;
                    margin-top: 5px;
                    text-align: center;
                    color: #2a2a2a;
                }
            }
            .imgfix{
                width: 67px;
                height: 67px;
                overflow: hidden;
               margin: 0 auto;
                img{
                    width: 100%;
                }
            }
            p{
                text-align: center;
            }
        }
    }
    
    .partner-wrap{
        background: #f4f4f4;
        .container{
            padding-bottom: 44px;
            .title-wrap{
                padding-top:38px;
                padding-bottom: 30px;
                h2{
                    font-size: 30px;
                }
                h2,span{
                    float: left;
                    margin: 0;
                }
                span{
                    color: #818181;
                    font-size: 12px;
                    margin-top: 16px;
                }
            }
            .partner-pic{
                div{
                    a{
                        display: block;
                        width: 148px;
                        height: 64px;
                        border:1px solid #dddddd;
                        border-radius: 5px;
                        margin-bottom: 20px;
                        overflow: hidden;
                        margin-left: auto;
                        margin-right: auto;
                        img{
                           width:100%;
                           height: 100%;
                        }
                    }
                    
                }
            }
        }
    }
}

footer{
    background: #3b3b3b;
     color: #8c8d94;
    .container{
        padding-top: 20px;
        padding-bottom: 20px;
        ul{
            margin-bottom: 11px;
            padding: 0;
            list-style: none;
            li{
                float: left;
                padding: 3px 5px 0;
                margin-right: 4px;
                a{
                    color: #8c8d94;
                }
            }
        }
        p{
            font-size: 12px;
            padding: 0 5px;
            margin-bottom: 15px;
            a{
                color: #8c8d94;
            }
        }
        .connect-way{
            >div{
                float: right;
                padding-top: 8px;
                .icon-wrap{
                    float: left;
                    margin-left: 20px;
                    position: relative;
                     >.icon{
                        width: 38px;
                        height: 38px;
                        overflow: hidden;
                        background: #d8d8e0;
                        border-radius: 50%;
                        background: url(../img/footer.png) no-repeat 0px -1px;
                    }
                    .wechat{
                        background: url(../img/footer.png) no-repeat -58px 0px;
                    }
                    .qq{
                        background: url(../img/footer.png) no-repeat -116px 0px;
                    }
                    .imgfix{
                        width: 141px;
                        height: 150px;
                        position: absolute;
                        top: -150px;
                        left: -49px;
                        opacity: 0;
                        z-index: -99;
                        transition:opacity 500ms;
                        img{
                            width: 100%;
                        }
                    }
                    &:hover{
                            .icon{
                                background-position-y:-39px ;
                            }
                            .imgfix{
                                z-index: 99;
                                opacity: 2;
                            }
                        }
                }
            }
        }
    }
}

//以下是媒体查询具体样式
@media (min-width:768px) and (max-width:992px){
   .nav{
       >li{
           >a{
               padding: 15px  5px 15px  5px;
           }
       }
   } 
   .col-xs-12 {
        width: 100%;
    }
    .xs-mb{
        margin-bottom:15px;
    }
}

@media (min-width: 1200px){
    .container {
        width: 1000px;
        padding-left: 14px;
    }
    .mb32px{
        margin-bottom: 32px;
    }
    .padding-l19{
        padding-left: 19px;
    } 
    .padding-r0{
        padding-right: 0;
    }
}
@media (min-width:768px){
    //导航
    .navbar{
        border-radius: 0;
    }
   
}
@media (max-width:768px){
    footer{
        .container{
            .connect-way{
               >div{
                    float: left;
                }
            }
        }
    }
    
    .web{
        overflow-x: hidden;
    }
    .content{
        .container{
            padding: 0;
            h2{
                margin-left: 3px;
            }
        }
         .engine-wrap{
            .container{
                padding-top: 470px;
                 background: url(../img/flash-bg.jpg) no-repeat top 20px center ;
            }
        }
        .family-wrap{
             .icon-wrap,.icon-wrap2{
                 margin-left: 0;
                 margin-bottom: 20px;
             }
             h2{
                 text-align: left;
             }
        }
        .game-wrap{
            .container{
                 .game-pro>.row:first-of-type{
                    .g-content{
                        padding-top: 14px;
                    }
                }
                .video{
                    width: 100%;
                    margin-bottom: 20px;
                }
            }
           
        }
//      .partner-wrap{
//          .container{
//              .partner-pic{
//                  div{
//                      margin-left: 18px;
//                  }
//              }
//          }
//      }
    }
    
}
